<template>
  <div class="home">
      <div class="header">
        <div class="logo"></div>
        <div class="search">
          <el-input placeholder="请输入内容" size="small" v-model="search" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>        
      </div>
      <div class="foodPic-one"></div>
      <div class="container-new">
        <span class="newTitle">New New 🍎</span>
         <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <ul>
                <li v-for="item in theNew.slice(0,5)" :key='item.id'>
                  <a href="javascript:;" @click="jumpDetil(item)">
                    <div 
                      class="goodsBG" 
                      :style="{backgroundImage:'url(' + picBaseUrl + item.imgUrl + ')'}">
                    </div>
                    <span>{{ item.title }}  {{ item.goodsDescribe }}</span>
                    <span>￥{{ item.curPrice }}</span>
                    <div 
                      class="goodsCircleBG"
                      :style="{backgroundImage:'url(' + picBaseUrl + item.imgUrl + ')'}"
                    >
                    </div>
                  </a>        
                </li>
              </ul>
            </div>
            <div class="swiper-slide">
              <ul>
                <li v-for="item in theNew.slice(5,10)" :key='item.id'>
                  <a href="javascript:;" @click="jumpDetil(item)">
                    <div 
                      class="goodsBG" 
                      :style="{backgroundImage:'url(' + picBaseUrl + item.imgUrl + ')'}">
                    </div>
                    <span>{{ item.title }}  {{ item.goodsDescribe }}</span>
                    <span>￥{{ item.curPrice }}</span>
                    <div 
                      class="goodsCircleBG"
                      :style="{backgroundImage:'url(' + picBaseUrl + item.imgUrl + ')'}"
                    >
                    </div>
                  </a>        
                </li>
              </ul>
            </div>
            <div class="swiper-slide">
              <ul>
                <li v-for="item in theNew.slice(10,16)" :key='item.id'>
                  <a href="javascript:;" @click="jumpDetil(item)">
                    <div 
                      class="goodsBG" 
                      :style="{backgroundImage:'url(' + picBaseUrl + item.imgUrl + ')'}">
                    </div>
                    <span>{{ item.title }}  {{ item.goodsDescribe }}</span>
                    <span>￥{{ item.curPrice }}</span>
                    <div 
                      class="goodsCircleBG"
                      :style="{backgroundImage:'url(' + picBaseUrl + item.imgUrl + ')'}"
                    >
                    </div>
                  </a>        
                </li>
              </ul>
            </div>                                    
        </div>
        <!-- Add Pagination -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
        </div>
        <a href="/MoreGoods/new" class="moreBtn">更多</a>
      </div>
      <div class="container-hot">
        <span class="hotTitle">Sell Top 3 ✨</span>
        <div class="top">
          <a href="#" class="top3"></a>
          <a href="#" class="top3"></a>
          <a href="#" class="top3"></a>
          <span class="hotTitle">Hot Hot 🔥</span>
            <div class="swiper-container">
              <div class="swiper-wrapper">
            <div class="swiper-slide">
              <ul>
                <li v-for="item in theHot.slice(0,5)" :key='item.id'>
                  <a href="javascript:;" @click="jumpDetil(item)">
                    <div 
                      class="goodsBG" 
                      :style="{backgroundImage:'url(' + picBaseUrl + item.imgUrl + ')'}">
                    </div>
                    <span>{{ item.title }}    {{ item.goodsDescribe }}</span>
                    <span>￥{{ item.curPrice }}</span>
                    <div 
                      class="goodsCircleBG"
                      :style="{backgroundImage:'url(' + picBaseUrl + item.imgUrl + ')'}"
                    >
                    </div>
                  </a>        
                </li>
              </ul>
            </div>
            <div class="swiper-slide">
              <ul>
                <li v-for="item in theHot.slice(5,10)" :key='item.id'>
                  <a href="javascript:;" @click="jumpDetil(item)">
                    <div 
                      class="goodsBG" 
                      :style="{backgroundImage:'url(' + picBaseUrl + item.imgUrl + ')'}">
                    </div>
                    <span>{{ item.title }}    {{ item.goodsDescribe }}</span>
                    <span>￥{{ item.curPrice }}</span>
                    <div 
                      class="goodsCircleBG"
                      :style="{backgroundImage:'url(' + picBaseUrl + item.imgUrl + ')'}"
                    >
                    </div>
                  </a>        
                </li>
              </ul>
            </div>
            <div class="swiper-slide">
              <ul>
                <li v-for="item in theHot.slice(10,16)" :key='item.id'>
                  <a href="javascript:;" @click="jumpDetil(item)">
                    <div 
                      class="goodsBG" 
                      :style="{backgroundImage:'url(' + picBaseUrl + item.imgUrl + ')'}">
                    </div>
                    <span>{{ item.title }}    {{ item.goodsDescribe }}</span>
                    <span>￥{{ item.curPrice }}</span>
                    <div 
                      class="goodsCircleBG"
                      :style="{backgroundImage:'url(' + picBaseUrl + item.imgUrl + ')'}"
                    >
                    </div>
                  </a>        
                </li>
              </ul>
            </div>
        </div>
        <!-- Add Pagination -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
        </div>
        <a href="/MoreGoods/hot" class="moreBtn">更多</a>
        </div>
      </div>
      <div class="footImage"></div>
      <Footer></Footer>
  </div>
</template>

<script>
import Swiper from 'swiper'
import Footer from '../components/foot.vue'
import http from '../utils/http'


export default {
  data(){
    return{
      search: "",
      theNew: [],
      theHot: [],
      picBaseUrl : http.picBaseUrl
    }
  },
  created(){
      http.getNewGoods().then( res => {      
          this.theNew = res.data.obj.records
          console.log(res.data.obj.records,this.picBaseUrl)
      }).catch(err=>{
          console.log(err)
      })
      http.getHotGoods().then( res => {      
          this.theHot = res.data.obj
          console.log(res.data.obj,this.picBaseUrl)
      }).catch(err=>{
          console.log(err)
      })
  },
  components:{
    Footer
  },
  mounted () {
    this.$nextTick( () => {
        new Swiper('.swiper-container', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30,
        autoplay: 5000,
        autoplayDisableOnInteraction : false,
    });
    })
  },
  methods: {
    jumpDetil(goods){
      this.$router.push({
        name:'GoodDetil',
        query:goods
      })
    }
  }

}
</script>

<style lang="scss" scoped>
    .home{
      margin: 0 auto;
      width: 100%;
      .header{
        width: 80%;
        margin: 0 auto;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .logo{
          display: inline-block;
          width: 190px;
          height: 60px;        
          background: url('../images/logo.png');
          background-size: 100% 100%;
        }
        .search{
          width: 400px;
        }
      }
      .foodPic-one{
          width: 100%;
          height: 600px;        
          background: url('../images/食物图片1.png') no-repeat;
          background-size: 100% 100%;
      }
      .container-new, .container-hot{
        width: 85%;
        margin: 0 auto;
        text-align: center;
        padding: 10px 0;
        .newTitle{
          display: inline-block;
          margin: 30px 0 25px 0;
          font-weight: 700;
          font-size: 20px;
        }
        ul{
          list-style: none;
          display: flex;    
          overflow: hidden;     
          li{
            margin: 10px;
            width: 30%;
            height: 370px;
            border: 1px solid #d4d4d4;
            border-radius: 10px;
            box-shadow: 10px 5px 5px -2px #888888;
            .goodsBG{
              width: 100%;
              height: 275px;
              background-size: 100% 100%;
            }
            span:nth-child(2), span:nth-child(3){
                text-align: left;
                display: block;
                padding: 5px 10px;
                font-weight: 500;
                font-size: 15px;
            }
            span:nth-child(3){
              padding-top: 0;
            }
            .goodsCircleBG{
              margin: 5px 10px;
              width: 30px;
              height: 30px;
              
              background-size: 100% 100%;;
              border-radius: 100%;
            }
          }
        }
      }
      .container-hot{
        width: 85%;
        margin: 0 auto;
        text-align: center;
        padding: 10px 0;
        .hotTitle{
            display: inline-block;
            margin: 30px 0 25px 0;
            font-weight: 700;
            font-size: 20px;
        }
        .top {
          width: 90%;
          margin: 20px auto;
          .top3{
            display: inline-block;
            margin: 0 10px;
            width: 30%;
            height: 400px;
            background: red;
            margin-bottom: 30px;
          }
        }
      }
    }
    .moreBtn{
      display: inline-block;
      margin-top: 10px;
      width: 180px;
      height: 50px;
      border: 2px solid black;
      background: #fff;
      letter-spacing: 20px;
      text-indent: 20px;
      border-radius: 20px;
      font-size: 18px;
      line-height: 50px;
     
      font-weight:600;
      text-align: center;
    }
    .footImage{
      margin-top: 25px;
        width: 100%;
        height: 600px;        
        background: url('../images/食物图片2.png') no-repeat;
        background-size: 100% 100%;
    }
</style>